<template>
  <table-box ref="tableBox" class="table-height-auto" show-index :data="tableData" :table-config="tableConfig" />
</template>
<script>
export default {
  name: 'ShopTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: true
    },
    customerCode: {
      type: String,
      default: undefined
    },
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mdmShop: [
        {
          prop: 'code',
          label: '门店编码',
          minWidth: 200,
          required: true,
          render: (h, row) => {
            if (![1, '1'].includes(row.isNewBusinessTakeover)) {
              return h('span')
            }
            if (!this.isEdit) {
              return h('span', row.code)
            }
            return h('c-common-search-shop-by-customer', {
              props: {
                customerCode: this.customerCode,
                disabled: !this.customerCode,
                value: row.code,
                label: row.name,
                formatLabel: d => {
                  return d.code
                }
              },
              on: {
                input: v => {
                  this.$set(row, 'code', v)
                },
                'update:label': v => {
                  this.$set(row, 'name', v)
                },
                change: v => {
                  if (!v) {
                    v = {}
                  }
                  this.$set(row, 'shopInfoPhone', v.shopInfoPhone || '')
                  this.$set(row, 'shopServPhone', v.shopServPhone || '')
                  this.$emit('onCodeChange', v, row)
                }
              }
            })
          }
        },
        {
          prop: 'name',
          label: '门店名称',
          minWidth: 120,
          render: (h, row) => {
            if (![1, '1'].includes(row.isNewBusinessTakeover)) {
              return h('span')
            }
            return h('span', {}, row.name)
          }
        }
      ],
      tableConfig: {
        hideFuncBar: true,
        setting: [
          {
            prop: 'originalCode',
            label: '原门店编码',
            minWidth: 120
          },
          {
            prop: 'originalShopAddr',
            label: '原门店详细地址',
            minWidth: 150
          },
          {
            prop: 'originalOperateArea',
            label: '原门店经营面积(㎡)',
            minWidth: 155
          },
          {
            prop: 'originalBusinessType',
            label: '原门店业务类型',
            minWidth: 140,
            formatData: v => {
              return v.originalBusinessTypeName ? v.originalBusinessTypeName : v.originalBusinessType
            },
            render: (h, row) => {
              if (!row.originalBusinessType) {
                return h('span')
              }
              const codes = row.originalBusinessType.split(',').filter(e => !!e)
              return h('c-common-search-mdm', {
                props: {
                  custDocCode: 'QY037',
                  filtersRaw: []
                },
                scopedSlots: {
                  default: data => {
                    const v = codes.map(e => {
                      const t = data.find(d => d.code === e)
                      if (t) {
                        return t.name
                      }
                      return e
                    })
                    return h('span', v.join(','))
                  }
                }
              })
            }
          },
          {
            prop: 'isNewBusinessTakeover',
            label: '新商是否接管该门店',
            minWidth: 200,
            render: (h, row) => {
              if (!this.isEdit) {
                return h('c-dict-range-view', {
                  props: {
                    appCode: 'slm',
                    domainCode: 'marketing',
                    dictTypeCode: 'BOOLEANS',
                    value: row.isNewBusinessTakeover
                  }
                })
              }
              return h('c-dict-select', {
                props: {
                  value: row.isNewBusinessTakeover,
                  dictTypeCode: 'BOOLEANS',
                  appCode: 'slm',
                  domainCode: 'marketing',
                  clearable: true,
                  placeholder: '请选择'
                },
                attrs: {
                  clearable: true
                },
                on: {
                  input: v => this.$set(row, 'isNewBusinessTakeover', v),
                  change: v => this.$emit('on-takeover-change', v, row)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            }
          },
          {
            prop: 'name',
            label: '门店名称',
            minWidth: 200,
            required: this.isEdit,
            render: (h, row) => {
              if (![1, '1'].includes(row.isNewBusinessTakeover)) {
                return h('span')
              }
              if (!this.isEdit) {
                return h('span', {}, row.name)
              }
              return h('el-input', {
                props: {
                  value: row.name,
                  clearable: true,
                  placeholder: '请输入'
                },
                attrs: {
                  clearable: true
                },
                on: {
                  input: v => this.$set(row, 'name', v)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            }
          },
          {
            prop: 'shopInfoPhone',
            label: '门店咨询电话',
            minWidth: 200,
            required: this.isEdit,
            render: (h, row) => {
              if (![1, '1'].includes(row.isNewBusinessTakeover)) {
                return h('span')
              }
              if (!this.isEdit) {
                return h('span', {}, row.shopInfoPhone)
              }
              return h('el-input', {
                props: {
                  value: row.shopInfoPhone,
                  clearable: true,
                  placeholder: '请输入'
                },
                attrs: {
                  clearable: true
                },
                on: {
                  input: v => this.$set(row, 'shopInfoPhone', v)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            }
          },
          {
            prop: 'shopServPhone',
            label: '门店售后电话',
            minWidth: 200,
            required: this.isEdit,
            render: (h, row) => {
              if (![1, '1'].includes(row.isNewBusinessTakeover)) {
                return h('span')
              }
              if (!this.isEdit) {
                return h('span', {}, row.shopServPhone)
              }
              return h('el-input', {
                props: {
                  value: row.shopServPhone,
                  clearable: true,
                  placeholder: '请输入'
                },
                attrs: {
                  clearable: true
                },
                on: {
                  input: v => this.$set(row, 'shopServPhone', v)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            }
          },
          {
            prop: 'ACCESS055',
            label: '营业执照',
            minWidth: 300,
            required: this.isEdit,
            render: (h, row) => {
              if (![1, '1'].includes(row.isNewBusinessTakeover)) {
                return h('span')
              }
              if (!row.ACCESS055) {
                row.ACCESS055 = []
              }
              const props = {
                title: '上传附件',
                typeCode: 'ACCESS055',
                modelId: row.id,
                directDel: true,
                value: row.ACCESS055,
                viewType: 'list',
                // limit: 1,
                uploadable: this.isEdit,
                editable: this.isEdit
              }
              return h('c-file-list', {
                class: 'file-list-table',
                props,
                attrs: props,
                on: {
                  input: v => this.$set(row, 'ACCESS055', v)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            }
          },
          {
            prop: 'ACCESS056',
            label: '专卖店特殊经营合同',
            minWidth: 300,
            required: this.isEdit,
            render: (h, row) => {
              if (![1, '1'].includes(row.isNewBusinessTakeover)) {
                return h('span')
              }
              if (!row.ACCESS056) {
                row.ACCESS056 = []
              }
              const props = {
                title: '上传附件',
                typeCode: 'ACCESS056',
                modelId: row.id,
                directDel: true,
                value: row.ACCESS056,
                viewType: 'list',
                // limit: 1,
                uploadable: this.isEdit,
                editable: this.isEdit
              }
              return h('c-file-list', {
                class: 'file-list-table',
                props,
                attrs: props,
                on: {
                  input: v => this.$set(row, 'ACCESS056', v)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            }
          }
        ]
      }
    }
  },
  watch: {
    customerCode: {
      handler(v) {
        this.tableData.forEach(e => {
          this.$set(e, 'code', '')
          this.$set(e, 'name', '')
        })
      }
    }
  },
  created() {
    if (this.isAudit) {
      const i = this.tableConfig.setting.findIndex(e => e.prop === 'name')
      if (i >= 0) {
        this.tableConfig.setting.splice(i, 1, ...this.mdmShop)
      }
    }
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        const fileKeys = 'ACCESS055 ACCESS056'.split(' ')
        const requireds = this.tableConfig.setting.filter(e => e.required && !fileKeys.includes(e.prop))
        if (requireds.length <= 0 || !this.isEdit) return resolve(true)
        const msgs = []
        // 格式校验
        const rules = {
          shopInfoPhone: { label: '门店咨询电话', rule: v => {
            if (!/^(\d{3,4}-?)?\d{7,8}$|^\d{11}$/.test(v)) {
              return '格式有误'
            }
          } },
          shopServPhone: { label: '门店售后电话', rule: v => {
            if (!/^(\d{3,4}-?)?\d{7,8}$|^\d{11}$/.test(v)) {
              return '格式有误'
            }
          } }
        }
        const rulesKV = Object.entries(rules)
        for (let i = 0; i < this.tableData.length; i++) {
          const t = this.tableData[i]
          if (![1, '1'].includes(t.isNewBusinessTakeover)) continue
          for (const r of requireds) {
            if (t[r.prop] === '' || t[r.prop] === undefined || t[r.prop] === null) {
              msgs.push(`【新增门店信息】第${i + 1}行【${r.label}】未选择或未填写`)
            }
          }
          for (const k of fileKeys) {
            if (!(t[k] instanceof Array) || t[k].length <= 0) {
              const r = this.tableConfig.setting.find(e => e.prop === k)
              msgs.push(`【新增门店信息】第${i + 1}行【${r.label}】未上传`)
            }
          }
          for (const [k, v] of rulesKV) {
            if (t[k] !== '' && t[k] !== undefined && t[k] !== null) {
              const m = v.rule(t[k])
              if (m) {
                msgs.push(`【门店联系人】第${i + 1}行【${v.label}】${m}`)
              }
            }
          }
        }
        if (msgs.length > 0) {
          this.$message({
            type: 'warning',
            message: msgs.join('<br>'),
            dangerouslyUseHTMLString: true
          })
          reject(false)
          return
        }
        resolve(true)
      })
    },
    getData() {
      const data = this.$deepClone(this.tableData)
      data.forEach(d => {
        d.attachmentDTOS = [
          ...this.$getFiles(d.ACCESS055 || []),
          ...this.$getFiles(d.ACCESS056 || [])
        ]
        delete d.ACCESS055
        delete d.ACCESS056
      })
      return data
    }
  }
}
</script>
<style lang="scss">
.file-list-table {
  .c-file-list{
    width: 100% !important;
  }
  .file-name {
    flex: 0 0 auto;
  }
  .option-box{
    display: flex !important;
    margin-left: 10px !important;
  }
}
</style>
